<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>意见管理</el-breadcrumb-item>
      <el-breadcrumb-item>意见列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 评论列表 -->
      <el-table
        :data="adviceList"
        :border="true"
        stripe
        style="width: 100%">
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        <el-table-column :formatter="formatDate" prop="time" label="更新时间" width="200"></el-table-column>
        <el-table-column prop="content" label="评论内容" width="600"></el-table-column>
        <el-table-column label="操作" width="200px">
          <!-- 删除按钮 -->
          <el-tooltip :enterable="false" effect="dark" content="删除" placement="top-start">
            <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
          </el-tooltip>

        </el-table-column>

      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        :current-page="adviceInfo.pageNum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="adviceInfo.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getAdvice } from '@/api/advice'

export default {
  data() {
    return {
      // 获取用户列表对象
      adviceInfo: {
        // 当前的页数
        pageNum: 1,
        // 每页显示的条数
        pageSize: 5
      },
      adviceList: [],
      total: 0
    }
  },
  created() {
    this.getAdviceList()
  },
  methods: {
    // 获取用户意见列表

    async getAdviceList() {
      const { data: result } = await getAdvice(this.adviceInfo)// 解构数据
      this.adviceList = result.data.adviceList
      this.total = result.data.total
    },

    // 监听每页显示几个事件
    handleSizeChange(newSize) {
      this.adviceInfo.pageSize = newSize
      this.getAdviceList()
    },
    // 监听页码值改变的事件
    handleCurrentChange(newPage) {
      this.adviceInfo.pageNum = newPage
      this.getAdviceList()
    },
    // 改变时间格式
    formatDate(row, column) {
    // 获取单元格数据

      const data = row[column.property]
      if (data == null) {
        return null
      }
      const dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + '  ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
    }
  }

}
</script>

<style scoped>
.full-width {
  width: 100%;
}
</style>
